<template>
    <div>
        <el-card shadow="always" class="main">
            <div class="head">
                <el-image class="logo" :src="logo" fit="fit" />
            </div>
            <div>
                <span class="title">找回密码</span>
            </div>
            <div class="body">
                <el-form :model="form" :rules="rules">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="email" >
                                <el-input placeholder="请输入绑定过的邮箱" v-model="form.email" maxlength="50">
                                    <template slot="prepend">
                                        <i class="el-icon-message"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="password" >
                                <el-input type="password" placeholder="请输入新密码" v-model="form.password" maxlength="50">
                                    <template slot="prepend">
                                        <i class="el-icon-key"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="password2" >
                                <el-input type="password" placeholder="请再次确认新密码" v-model="form.password2" maxlength="50">
                                    <template slot="prepend">
                                        <i class="el-icon-key"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item prop="code" >
                                <el-input placeholder="请输入邮件验证码" v-model="form.code" maxlength="6">
                                    <template slot="prepend">
                                        <i class="el-icon-chat-dot-square"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-link href="/user/login" :underline="false">返回登录</el-link>
                        </el-col>
                        
                        <el-col :span="12">
                            <el-link :underline="false">发送邮件验证码</el-link>
                        </el-col>
                        <el-col :span="24">
                            <el-button class="submit" type="primary">确定</el-button>
                        </el-col>
                        <el-col :span="24">
                            <span>
                                使用已代表你已同意
                                <el-link href="https://element.eleme.io" target="_blank" type="primary">用户协议</el-link>
                                和
                                <el-link href="https://element.eleme.io" target="_blank" type="primary">隐私政策</el-link>
                            </span>
                        </el-col>
                        <el-col :span="24">
                            <span>Copyright @ 2020 DPC 版权所有</span>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        //
        return {
            logo: require('@/assets/img/test1.jpg'),
            // 表单数据
            form: {
                username: '',
                password: '',
                password2: '',
                email: '',
                code: '',
            },
            // 输入框验证
            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 50, message: '长度在 8 到 50 个字符', trigger: 'blur' }
                ],
                password2: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 6, max: 6, message: '验证码长度为6个数字', trigger: 'blur' }
                ],
            }
        };
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    .head {
        text-align: center;
        .logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
        }
    }
    div {
        margin-bottom: 2%;
        text-align: center;
        .title {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
        }
        .body {
            margin-top: 10%;
            margin-left: 32px;
            margin-right: 32px;
            text-align: left;
            .el-col {
                height: 60px;
            }
            .submit {
                width: 98%;
            }
        }
    }
}

</style>